<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/7
  Time: 15:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<!DOCTYPE html>
<html lang="zh">

<head>
    <title>Blog</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="aStar Fashion Template Project">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css"
          href="styles/bootstrap-4.1.3/bootstrap.css">
    <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css"
          rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css"
          href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
    <link rel="stylesheet" type="text/css"
          href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
    <link rel="stylesheet" type="text/css"
          href="plugins/OwlCarousel2-2.2.1/animate.css">
    <link rel="stylesheet" type="text/css" href="styles/blog.css">
    <link rel="stylesheet" type="text/css" href="styles/blog_responsive.css">
    <script type="application/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>

<body>

<div class="super_container">

    <jsp:include page="menu.jsp"></jsp:include>

    <!-- Home -->

    <div class="home">
        <div class="parallax_background parallax-window"
             data-parallax="scroll" data-image-src="images/blog.jpg"
             data-speed="0.8"></div>
        <div class="home_container">
            <div class="home_content">
                <c:if test="${order.ostatus eq 1}">
                <div class="home_title">订单详情:未支付</div>
                </c:if>
                <c:if test="${order.ostatus eq 3}">
                    <div class="home_title">订单详情:已过期</div>
                </c:if>
                <c:if test="${order.ostatus eq 2}">
                    <div class="home_title">订单详情:已支付</div>
                </c:if>
            </div>
        </div>
    </div>

    <!-- Blog -->



    <div class="blog">
        <div class="section_container">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <c:if test="${order.ostatus eq 1}">
                            <h1>倒计时:距离支付还剩 <label id="showtime"></label></h1>
                        </c:if>


                    </div>
                </div>
                <div class="row load_more_row">
                    <div class="col">
                        <h2>${order.oid} - ${order.ocountPrice}</h2>
                        <hr>
                        <div class="">

                            <ul id="goodsul">





                            </ul>
                        </div>

                        <a href="orderOver.do?oid=${order.oid}">支付</a>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="styles/bootstrap-4.1.3/popper.js"></script>
<script src="styles/bootstrap-4.1.3/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/blog.js"></script>
</body>

<script type="text/javascript">


    $(function(){

        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/queryOrderDetail.do",
            data:{
                "oid":"${order.oid}"
            },
            success:function (data) {
                var coment='';
                $.each(data,function (i,n) {
                    coment+='<li>名称：'+n.goodsEntity.gname+'-价格：'+n.odprice+'-数量'+n.odnumber+'</li>'
                })
                $("#goodsul").html(coment);
            }
        })







        var date01 =new Date();
        var format01="${format}";
        var msg=format01.split("-");
        var date02=new Date(msg[0],msg[1],msg[2],msg[3],msg[4],msg[5]);
         //时间已过的多少秒
        console.info(date02);
        var over= parseInt(date01.getTime())-parseInt(date02.getTime());
        console.info(over);
        //剩余时间
        var last=parseInt("1800000")-parseInt(over);
        console.info(last)
        //剩余多少分钟
        var last2=parseInt(last)/parseInt(60000);
        if (last>0) {
            date01.setTime(last);//应该是一个动态的,以后台的计数为标准
        }else{
            date01.setTime(0);
        }
            $("#showtime").text(last2);
            setInterval(function () {
                var str;

                date01.setTime(date01.getTime() - 1000);

                str = date01.getMinutes() + ":" + (date01.getSeconds() < 10 ? '0' + date01.getSeconds() : date01.getSeconds());

                $("#showtime").text(str);

            }, 1000);


    })


</script>

</html>
